<template>
	<view class="container">
		<view class="goods" v-if="goodsList.length!=0">
			<view class="goodsItem" v-for="(item,index) in goodsList" :key="index" @tap="gotoDetail(item.id)">
				<view>
					<image :src="item.pic"></image>
				</view>
				<view class="price">
					<text class="newPrice">￥{{item.price}}</text>
					<text class="olbPrice">￥{{item.originalPrice}}</text>
				</view>
				<view>
					<text class="productTitle">
						{{item.name}}
					</text>
				</view>
			</view>
		</view>

		<view v-if="showEmpty">
			<empty text="暂无数据"></empty>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsList: [],
				showEmpty:false
			}
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: options.brandName
			});
			this.getList(options.bid)
			uni.showLoading({
				title: '加载中'
			});
		},
		methods: {
			 getList(id) {
				setTimeout(async () => {
					let res = await this.$api.home.brandLIst(id)
					if(res.code==200){
						this.goodsList = []
						this.goodsList = res.data
						if(this.goodsList.length==0){
							this.showEmpty=true
						}
						uni.hideLoading();
					}
				}, 800);
			},
			gotoDetail(id) {
				uni.navigateTo({
					url: `/pages/view/ProductDetail?Pid=${id}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #eeeeee;
		height: 100vh;
	}

	.goods {
		background-color: #eeeeee;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.goodsItem {
			width: 355rpx;
			margin: 8rpx 8rpx;
			background-color: #ffffff;
			border-radius: 10rpx;
			overflow: hidden;
			box-shadow: 0px 0px 5px #e2e2e2;

			image {
				width: 100%;
				height: 200px;
			}

			.price {
				padding-left: 10rpx;

				.newPrice {
					font-size: 45rpx;
					color: #cb0d0d;
				}

				.olbPrice {
					color: gray;
					text-decoration: line-through;
				}

				text:nth-child(2) {
					margin-left: 17rpx;
				}
			}

			.shoppingsubTltie {
				padding-bottom: 30rpx;
			}

			.productTitle {
				color: gray;
			}
		}
	}
</style>
